{% extends 'it/base.html' %}
{% load task %}
{% block title_action %}提报工单{% endblock title_action %}

{% block css_other %}
    <!-- Datetimepicker -->
    <link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-spinner.min.css" rel="stylesheet">
{% endblock css_other %}

{% block content %}
    <div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h3>提报工单</h3>
        <form class="form" name="form_task" action="{% url 'task_add_do' %}" method="post">
            {% csrf_token %}
            {% post_token %}

            <div class="form-group has-feedback">
                <label><em style="color: red;">*</em>问题:</label>
                <input type="text" class="form-control" name="problem"
                       value="" placeholder="100字以内"/>
                <!--删除按钮-->
                <a class="glyphicon glyphicon-remove btn form-control-feedback"
                   id="del_text"></a>
            </div>

            <div class="form-group" id="div_out">
                <label><em style="color: red;">*</em>期望解决时间:</label>
                <!-- 日期选择 -->
{#                <div id="expect_time" class="input-group date">#}
{#                    <input type="text" class="form-control" name="expect_time" readonly value="" />#}
{#                    <span class="input-group-addon">#}
{#                        <span class="glyphicon glyphicon-calendar"></span>#}
{#                    </span>#}
{#                </div>#}
                <div class="form-inline">
                  <div class="input-group spinner" data-trigger="spinner">
                    <!-- 默认10分钟 -->
                    <input type="text" class="form-control text-center" name="expect_time"
                           data-rule="quantity" placeholder="时间数字" value="10">
                    <div class="input-group-addon">
                      <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                      <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                    </div>
                  </div>
                    <select class="form-control" name="unit_time">
                        <option value="minutes">分钟</option>
                        <option value="hours">小时</option>
                        <option value="days">天</option>
                    </select>
                </div>
            </div>

            <div class="form-group has-feedback">
                <label><em style="color: red;">*</em>我是:</label>
                <input type="text" class="form-control" name="initiator" value="" />
                <!--删除按钮-->
                <a class="glyphicon glyphicon-remove btn form-control-feedback"
                   id="del_text"></a>
            </div>

            <div class="form-group has-feedback">
                <label><em style="color: red;">*</em>我在:</label>
                <input type="text" class="form-control" name="address" value="" />
                <!--删除按钮-->
                <a class="glyphicon glyphicon-remove btn form-control-feedback"
                   id="del_text"></a>
            </div>

            <div class="form-group has-feedback">
                <label><em style="color: red;">*</em>请联系我:</label>
                <input type="text" class="form-control" name="phone_number" value="" />
                <!--删除按钮-->
                <a class="glyphicon glyphicon-remove btn form-control-feedback"
                   id="del_text"></a>
            </div>

            <!-- 滑块验证 -->
            <!--<div id="slide_box">
                <div id="slide_xbox">
                    <div id="slide_xbox_btn">
                        <i class="iconfont icon-double-right"></i>
                        <img src="" alt="">
                    </div>
                </div>
                <div id="slide_ybox">请按住滑块，拖动到最右边</div>
            </div>-->
            <div class="form-group has-feedback">
                <label><em style="color: red;">*</em>验证码:</label>
                <img id="captcha" src="{% url 'common_get_captcha' %}?url_path={{ request.path }}" alt="Captcha"
                    style="cursor: pointer;" />
                <em>(点击图片刷新)</em>
                <input type="text" class="form-control" name="verify_code" value="" />
                <!--删除按钮-->
                <a class="glyphicon glyphicon-remove btn form-control-feedback"
                   id="del_text" style="top: 40px;"></a>
                {% captcha_session_key %}
            </div>

            <p>
                <a class="btn btn-primary" href="{% url 'task_list' %}">返回列表</a>
                <button type="submit" class="btn btn-success">提交</button>
            </p>
        </form>

      </div>

    </div> <!-- /container -->
{% endblock content %}

{% block js_bottom_other %}
    <script src="/static/js/jquery.spinner.min.js"></script>
    <script src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        $(function () {

        });

        $("#expect_time").datetimepicker({
            language: 'zh-CN',
            weekStart: 1,/*一周从哪一天开始 0表示星期天*/
            todayHighlight: 1,/*如果为true, 高亮当前日期*/
            format: "yyyy-mm-dd hh:ii:00",
{#            minView: "month",   /* 设置只显示到月份, 默认到秒 */#}
            autoclose: true,
            todayBtn: true,
            startDate: new Date()
        });

        // 自动出现已有问题的下拉项
        $('input[name="problem"]').autocomplete({   // jquery-ui.js 自带扩展功能
            // 下拉项来源数据
            source: function (request, response) {
                // 问题关键词
                var keyword = $('input[name="problem"]').val();

                $.ajax({
                    url: "{% url 'task_query_problems' %}",
                    data: {
                        keyword: keyword
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                            // 接收到的数据类型Array [{'problem': '问题'},{'problem': '问题'}]
                            // 使用autocomplete实例化好的response方法
                            response($.map(data.problems, function (item) {

                                // item表示每一项数据
                                return item.problem;
                        }));
                    }
                }); // end ajax
            },
            focus: function () {
                // 阻止自带focus事件, 否则下面的.focus()事件无法执行
                return false;
            }
        }).focus(function () {
            // 输入框获得焦点显示所有下拉项, 无需输入才出现下拉框
            $(this).autocomplete("search");
        });

        // 问题提出者姓名, 下拉框提供选择
        $('input[name="initiator"]').autocomplete({
            source: function (request, response) {
                var initiator = $('input[name="initiator"]').val();

                $.ajax({
                    url: '{% url "task_query_names" %}',
                    data: {
                        name: initiator
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        response($.map(data.names, function (item) {
                            return item.initiator;
                        }));
                    }
                });
            }
        });

        // 问题提出者经常在的地方, 下拉框提供选择
        $('input[name="address"]').autocomplete({
            source: function (request, response) {
                var initiator = $('input[name="initiator"]').val();

                $.ajax({
                    url: '{% url "task_query_addresses" %}',
                    data: {
                        name: initiator
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        response($.map(data.addresses, function (item) {
                            return item.address;
                        }));
                    }
                });
            },
            focus: function () {
                return false;
            }
        }).focus(function () {
            $(this).autocomplete('search')
        });

        // 问题提出者经常是用的号码, 下拉框提供选择
        $('input[name="phone_number"]').autocomplete({
            source: function (request, response) {
                var initiator = $('input[name="initiator"]').val();

                $.ajax({
                    url: '{% url "task_query_phone_numbers" %}',
                    data: {
                        name: initiator
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        response($.map(data.phone_numbers, function (item) {
                            return item.phone_number;
                        }));
                    }
                });
            },
            focus: function () {
                return false;
            }
        }).focus(function () {
            $(this).autocomplete('search')
        });

        // 验证码, 设置随机数, 避免缓存
        $('#captcha').click(function () {
            this.setAttribute('src',
                '{% url "common_get_captcha" %}'+'?url_path={{ request.path }}&nocache='+Math.random());
        });
    </script>
{% endblock js_bottom_other %}